<template>
    <div class="user_list">
        <div class="user_list_touxiang">
            <img :src="'http://43.138.15.137:3000' + (!item.userAvatar ? '/assets/avatar/default.png' : item.userAvatar)">
        </div>
        <div class="user_list_center">
            <div class="username">{{ item.userNickname }}</div>
            <div class="namebtn">{{ item.userDesc == '请设置个性签名' ? '用户比较低调，没有个性签名' : item.userDesc }}</div>
        </div>
        <div v-fangdou v-if="item.myRelation" @click="follow" class="user_right"
            :class="{ user_right: item.myRelation == 'none', user_right_follow: item.myRelation !== 'none' }">
            {{ item.myRelation == 'none' ? '关注' : '' }}
            {{ item.myRelation == 'follow' ? '已关注' : '' }}
            {{ item.myRelation == 'both' ? '互相关注' : '' }}
            {{ item.myRelation == 'fan' ? '粉丝' : '' }}
        </div>
        <div v-fangdou v-else @click="follow" class="user_right" :class="{ user_right_follow: item.bothStatus == 1, }">
            {{ item.bothStatus == 0 ? '关注' : '' }}
            {{ item.bothStatus == 1 ? '互相关注' : '' }}
        </div>
    </div>
</template>
<script setup>
const emit = defineEmits(['follow'])
const prop = defineProps(
    {
        item: {
            type: Object,
            default: () => { },
        },
        index: {
            type: Number,
        }
    }
)
function follow() {
    emit('follow', { index: prop.index, id: prop.item.userId })
}
</script>  
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.user_list {
    color: #fff;
    height: r(70);
    display: flex;
    padding-left: r(20);
    align-items: center;
    width: 100%;

    .user_right {
        margin-left: auto;
        line-height: r(15);
        font-size: r(12);
        margin-right: r(20);
        width: r(70);
        height: r(25);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8355f;
        border-radius: r(5);
    }

    .user_right_follow {
        margin-left: auto;
        line-height: r(15);
        font-size: r(12);
        margin-right: r(20);
        width: r(70);
        height: r(25);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #383b44;
        border-radius: r(5);
    }

    .user_list_center {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .username {
            color: #e8e8e9;
            font-size: r(14);
        }

        .namebtn {
            margin-top: r(6);
            color: #8b8c96;
            font-size: r(12);
        }
    }
}

.user_list_touxiang {
    width: r(50);
    height: r(50);
    margin-right: r(10);

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}
</style>